<template name='userSide'>
	<view>
		<u-sticky>
			<view class="status">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<view class="navtitle">
					首页
				</view>
				<view class="search" @click='focus'>
					<u-search placeholder="请输入咨询咨询师/ 咨询师名称" :showAction='false' bgColor='#fff' disabled v-model="search" >
					</u-search>
				</view>
			</view>

		</u-sticky>
		<view class="top">

			<view class="numpeople">
				<text>{{bang}}</text> 人在这里得到帮助
			</view>
			<u-swiper :list="banner" @change="e => current = e.current" :autoplay="false" @click="carouselJump">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in banner" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<view class="justify-around advertising">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186387073006961.png"
					class="adver" />
				<text>优质咨询</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186387951190956.png"
					class="slash" />
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186387465182820.png"
					class="adver" />
				<text>服务保障</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186387951190956.png"
					class="slash" />
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186390965534276.png"
					class="adver" />
				<text>专业全面</text>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186387951190956.png"
					class="slash" />
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558186391103404492.png"
					class="adver" />
				<text>高效便捷</text>
			</view>
			<view class="inform">
				<view class="title">
					<image src="../../static/xtgg.png"></image>
				</view>
				<swiper vertical autoplay circular interval="4000" display-multiple-items='1'
					style="width: 67vw;height: 3vh;">
					<swiper-item v-for="(item, index) in question" :key="index">
						<text class="text">{{ item }}</text>
					</swiper-item>
				</swiper>
			</view>

		</view>
		<view class="content">
			<scroll-view scroll-x="true" style="width: 92vw;">
				<view class="KongKim">
					<view class="kkim" v-for="(item, index) in askTypeList" :key="index"  @click="counlists2(item.id,item.title)">
						<image :src="item.url" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</scroll-view>

			<view class="counselorbox">
				<view class="counselor back1" @click="counlists(0,Level[0])">
					<view class="title">
						{{Level[0]}}
					</view>
					<view class="con">
						严选师资 专业咨询
					</view>
				</view>
				<view class="counselor back2"  @click="counlists(1,Level[1])">
					<view class="title">
						{{Level[1]}}
					</view>
					<view class="con">
						温暖而有力量
					</view>
				</view>
				<view class="counselor back3"  @click="counlists(2,Level[2])">
					<view class="title">
						{{Level[2]}}
					</view>
					<view class="con">
						专注的心理服务
					</view>
				</view>
				<view class="counselor back4"  @click="counlists(3,Level[3])">
					<view class="title">
						{{Level[3]}}
					</view>
					<view class="con">
						放心的隐私保护
					</view>
				</view>
			</view>
			<view class="banner2" @click="public">
				<image :src="fudao[0]" mode=""></image>
			</view>
			<view class="recommend">
				<view class="titlebox">
					<view class="recommend">
						推荐咨询师
					</view>
					<view class="ss"  @click="counlists(0,'推荐咨询师')">
						<u-icon name="arrow-right" color="#999" size="15"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 720rpx;">
					<view class="conbox">
						<view class="counsel" v-for="(item,index) in counselor" :key="index"
							@click="particular(item.userId)">
							<view class="img">
								<image :src="item.wxAvatar" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="namebox">
									<view class="name">
										{{item.nickName}}
									</view>
									<view class="pick">
										<view class="v1">￥</view>
										<view class="v2">{{item.price}}<text>起</text></view>
									</view>
								</view>
								<scroll-view scroll-x="true" class="labelbox">
									<view class="label">
										<view  v-for="(itema,indexs) in item.goodWays" :key="indexs">
											{{itema.title}}
										</view>
									</view>
								</scroll-view>
								<view class="evaluatebox">
									<view class="evaleft">
										<view class="appraise">
											<u-rate :count="count" readonly gutter='1' size='13' v-model="item.score">
											</u-rate>
											<text>{{item.peopleCount}}人评价</text>
										</view>
										<view class="help">
											帮助人数<text> {{item.helpPeople}}</text>
										</view>
									</view>
									<view class="evaright" @click="privachat(item)">
										<image src="../../static/userSide/logo1.png" mode=""></image>
									</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>

			</view>

			<view class="popularizationbox">
				<view class="titlebox">
					<view class="title">
						心理咨询科普
					</view>
					<view class="ss" @click="popularizationList">
						<u-icon name="arrow-right" color="#999" size="15"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 720rpx;">
					<view class="conbox" v-for="(item,index) in  popularizationbox" :key="index"  @click="science(item.id)">
						<view class="img">
							<image :src="item.fileName" mode=""></image>
						</view>
						<view class="right">
							<view class="tit">
								{{item.title}}
							</view>
							<view class="textcon">
								{{item.info}}
							</view>
							<view class="bottom">
								<view class="lefts">
									<image :src="item.avatar" mode="aspectFill"></image>
									<text> {{item.username}}</text>
								</view>
								<view class="rights">
									{{item.readNum}}阅读
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
		<view class="bots" v-if="status">
			<!-- <view @click="ordersa">
				<image src="../../static/userSide/logo2.png" mode=""></image>

			</view> -->
			<view class="vv7" @click="news">
				<image src="../../static/userSide/logo3.png" mode=""></image>
				<text v-if="wei!=0">
					{{wei}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHomeAnnouncement,
		getindexbanner,
		getConsultantLevel,
		getArticlesCounselingOfList,
		getRecommendUserList,
		getMessageCount,
		getAskTypeList,
		getIndexPersonCount
	} from '../../api/index.js'
	export default {
		name: 'userSide',
		props: {
			cur: String,
		},
		data() {
			return {
				banner: [

				],
        parameter: [

        ],
				search: '',
				current: 0,
				question: [],
				count: 5,
				value: 2,
				counselor: [],
				popularizationbox: [],
				status: false,
				Level: [],
				fudao: [],
				wei: 0,
				askTypeList: [],
				bang: 0,
				socketTask: null,
			};
		},
		created() {
			let that = this
			if (this.$store.state.app.token != "token") {
				this.status = true
				getMessageCount(1).then(res => {
					this.wei = res.data
					if(this.wei == null){
						this.wei = 0
					}
					console.log(res.data)
				})
			}
			//公告
			getHomeAnnouncement(2).then(response => {
				for (var i = 0; i < response.rows.length; i++) {
					this.question.push(response.rows[i].noticeTitle)
				}
			})
			//轮播
			getindexbanner(0).then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					this.banner = res.rows[i].url.split(',')
          this.parameter = res.rows[i].parameter.split(',')
				}
			})
			//咨询师等级
			getConsultantLevel("advisor_type").then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					this.Level.push(res.rows[i].dictLabel)
				}
			})
			//公益救助图
			getindexbanner(2).then(response => {
				for (var i = 0; i < response.rows.length; i++) {

					this.fudao.push(response.rows[i].url.split(',')[0])
				}
			})
			//心里文章列表
			getArticlesCounselingOfList().then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					this.popularizationbox.push(res.rows[i])
				}

			})
			//首页咨询师
			getRecommendUserList().then(res => {
				for (var i = 0; i < res.data.rows.length; i++) {
					this.counselor.push(res.data.rows[i])
				}
			})
			//查询咨询类别
			getAskTypeList().then(res => {
				this.askTypeList = res.data
			})
			//查询首页帮助人数
			getIndexPersonCount().then(res => {
				this.bang = res.data
			})
		},
		methods: {
            focus(){
                console.log('sadsad');
                uni.navigateTo({
                    url:'/pages/userSide/search'
                })
            },
			ordersa(){
				   this.$emit('ordersa', 1);
			},
			news(){
			    uni.navigateTo({
			        url:'/pages/User/news'
			    })
			},
            science(id){
                uni.navigateTo({
                    url:'/subPackages/pages/home/science?id='+id
                })
            },
			privachat(open) {
				if (open.userId == this.$store.state.userInfo.wxInfo.uid) {
					uni.showToast({
						title: "不能和自己聊天",
						icon: "none", //不要图标
						duration: 3000 //显示时长
					});
				}else{
					uni.navigateTo({
						url: '/pages/userSide/privateChat?id=' + open.userId + "&ava=" + open.wxAvatar+ "&status=1"
					})
				}
			},
      public() {
				uni.navigateTo({
					url: '/pages/public/public?cur=1'
				})
			},
			particular(id) {
				uni.navigateTo({
					url: '/pages/userSide/particulars?id=' + id
				})
			},
            counlists(a,title){
                console.log("asdasdsad");
                uni.navigateTo({
                    url:'/subPackages/pages/home/home?id='+a+'&&title='+title
                })
            },
            counlists2(a,title){
                console.log("asdasdsad");
                uni.navigateTo({
                    url:'/subPackages/pages/home/home2?id='+a+'&&title='+title
                })
            },
            popularizationList(){
                uni.navigateTo({
                    url:'/subPackages/pages/home/popularizationList'
                })
            },

      carouselJump(index) {
        let id = this.parameter[index]
        if (id) {

          // 跳转到商品页面
          uni.navigateTo({
            url: '../../subPackages/pages/shoppingmall/productDetails/productDetails?id=' + id
          })

        }

      }

		}
	}
</script>

<style lang="scss">
	.status {
		padding: 0 4vw;
		background-image: linear-gradient(#0A78CD, #3992cd);

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.navtitle {
			padding: 20rpx 0;
			font-size: 34rpx;
			color: #fff;
			text-align: center
		}

		.search {
			padding-bottom: 20rpx;
		}
	}

	.top {
		padding: 0 4vw;
		background-image: linear-gradient(#3992cd, #fff, #fff);

		.indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
					height: 6px;
					width: 15px;
				}
			}
		}

		.numpeople {
			color: #fff;
			font-size: 20rpx;
			padding: 20rpx 0;
			overflow: hidden;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.advertising {
			padding: 0.63rem 1.06rem 1.06rem;

			.adver {
				width: 0.69rem;
				height: 0.72rem;

			}

			.slash {
				width: 0.28rem;
				height: 0.75rem;
			}

			text {
				color: #999999;
				font-size: 0.75rem;
				font-family: SourceHanSansCN;
				line-height: 0.75rem;
			}
		}

		.inform {
			margin-top: 20rpx;
			padding: 15rpx 20rpx;
			background-color: #FAF6FE;
			display: flex;
			align-items: center;
			border-radius: 10rpx;

			.title {
				margin-right: 20rpx;
				padding: 5rpx 20rpx;
				border-right: 1rpx solid #999;
				background: url('@/static/dian.png')no-repeat 120rpx top;
				background-size: 28rpx 28rpx;

				image {
					width: 119rpx;
					height: 30rpx;
				}
			}

			.text {
				color: #333;
				font-size: 30rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 60vw;
				display: inline-block;
			}
		}

		.bannerhd {
			margin: 20rpx 0;
			position: relative;

			image {
				width: 92vw;
			}

			.butt {
				position: absolute;
				right: 18vw;
				bottom: 5vw;
				width: 27vw;
				height: 8vw;
				border-radius: 50rpx;
			}
		}


	}

	.content {
		width: 92vw;
		margin: 0 auto;

		.KongKim {
			margin: 20rpx 0;
			display: inline-flex;
			justify-content: space-between;

			.kkim {
				width: 120rpx;
				margin-right: 20rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				margin-top: 16rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

		.counselorbox {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.counselor {
				margin-top: 20rpx;
				padding: 50rpx 20rpx 60rpx;
				width: 48%;
				border-radius: 15rpx;
				overflow: hidden;
				box-shadow: 0 0 5rpx 5rpx #eee;

				.title {
					font-size: 30rpx;
					font-weight: bold;
				}

				.con {
					margin-top: 10rpx;
					color: #333;
					font-size: 24rpx;
				}
			}

			.back1 {
				background: url('http://222.135.140.20:9000/ob-psy/2022/12/19/678f07a929824a8191f8aee349f23700.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.back2 {
				background: url('http://222.135.140.20:9000/ob-psy/2022/12/19/12d74869af10408c8acbb6d63165a4a3.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.back3 {
				background: url('http://222.135.140.20:9000/ob-psy/2022/12/19/bcceac12732e4bd0a3244ccfa4cc3d4a.png') no-repeat center center;
				background-size: 110% 120%;
			}

			.back4 {
				background: url('http://222.135.140.20:9000/ob-psy/2022/12/19/293a3d79d70f4095a0918fd7f6cf6399.png') no-repeat center center;
				background-size: 120% 120%;
			}
		}

		.banner2 {
			margin: 20rpx 0;

			image {
				width: 92VW;
				height: 260rpx;
			}

		}

		.recommend {
			.titlebox {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.recommend {
					font-weight: bold;
					font-size: 30rpx;
				}
                .ss{
                    margin-left: 30rpx;
                }
			}


			.conbox {
				.counsel {
					margin-top: 25rpx;
					display: flex;

					.img {
						margin-right: 30rpx;

						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.right {
						width: 450rpx;

						.namebox {
							display: flex;
							justify-content: space-between;

							.name {
								font-size: 30rpx;
								font-weight: bold;
							}

							.pick {
								display: flex;
								color: #FF1A00;

								.v1 {
									font-size: 26rpx;
								}

								.v2 {
									font-size: 36rpx;
									font-weight: bold;

									text {
										font-size: 20rpx;
										font-weight: normal;
									}
								}
							}
						}

						.labelbox {
							width: 430rpx;
							margin: 0 0 15rpx;
							height: 55rpx;

							.label {
								display: inline-flex;

								view {
									color: #666;
									background-color: #EFF1FF;
									font-size: 20rpx;
									padding: 5rpx 10rpx;
									border-radius: 5rpx;
									margin-right: 10rpx;
								}
							}

						}

						.evaluatebox {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.evaleft {
								.appraise {
									display: flex;

									text {
										color: #333;
										font-size: 24rpx;
									}
								}

								.help {
									margin-top: 20rpx;
									font-size: 24rpx;
									color: #999;

									text {
										color: #333;
									}
								}
							}

							.evaright {
								image {
									width: 72rpx;
									height: 72rpx;
								}
							}
						}
					}
				}

			}
		}

		.popularizationbox {
			.titlebox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;

				.title {
					font-weight: bold;
					font-size: 30rpx;
				}
                .ss{
                    padding-left: 30rpx;
                }
			}

			.conbox {
				margin-bottom: 30rpx;
				display: flex;

				.img {
					margin-right: 30rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.right {
					width: 450rpx;
					color: #333;

					.tit {
						font-size: 30rpx;
					}

					.textcon {
						height: 80rpx;
						font-size: 24rpx;
						margin: 25rpx 0 20rpx;
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lefts {
							display: flex;
							align-items: center;

							image {
								width: 44rpx;
								height: 44rpx;
								margin-right: 16rpx;
								border-radius: 50rpx;
							}

							text {
								font-size: 24rpx;
								color: #666;
							}
						}

						.rights {
							font-size: 24rpx;
							color: #666
						}
					}
				}
			}
		}
	}

	.bots {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		width: 105rpx;

		image {
			width: 105rpx;
			height: 110rpx;
		}

		.vv7 {
			position: relative;

			text {
				position: absolute;
				top: 0;
				right: 5rpx;
				background: #FF1A00;
				color: #fff;
				display: inline-block;
				font-size: 20rpx;
				text-align: center;
				width: 40rpx;
				line-height: 40rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>
